<template>
    <div class="body">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加新图书</h3>
            </div>
            <form class="panel-body form-inline">
                <div class="input-group">
                    <div class="input-group-addon">书名</div>
                    <input
                        type="text"
                        class="form-control"
                        placeholder="请输入书名"
                        v-model="bookname"
                    />
                </div>

                <div class="input-group">
                    <div class="input-group-addon">作者</div>
                    <input
                        type="text"
                        class="form-control"
                        placeholder="请输入作者"
                        v-model="creator"
                    />
                </div>

                <div class="input-group">
                    <div class="input-group-addon">出版社</div>
                    <input
                        type="text"
                        class="form-control"
                        placeholder="请输入出版社"
                        v-model="author"
                    />
                </div>

                <button class="btn btn-primary" @click.prevent="add">添加</button>
            </form>
        </div>

        <!-- 图书的表格 -->
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item.id">
                    <td> {{ item.bookname }} </td>
                    <td> {{ item.creator }} </td>
                    <td> {{ item.author }} </td>
                    <td></td>
                    <td>
                        <a href="javascript:;" class="del" @click="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
// todo axios 实现图书管理案例
//  安装 bootstrap  需要安装3的版本  yarn add bootstrap@3
//  导入 bootstrap的css文件美化样式
import 'bootstrap/dist/css/bootstrap.css'
import axios from 'axios'
// 接口地址： https://www.showdoc.com.cn/1834761734600444/8449559255355128
axios.defaults.baseURL = 'http://ajax-api.itheima.net'

export default {
    data() {
        return {
            list: [],
            bookname: '',
            creator: '',
            author: ''
        }
    },
    created () {
        this.getList()
    },
    methods:{
        async getList(){
            const {data: res} = await axios('/api/books')
            console.log(res);
            this.list = res.data
        },
        async del(id){
            const {data: res} = await axios.delete(`/api/books/${id}`)
            this.getList()
        },
        async add(){
            this.list.unshift({
                bookname: this.bookname,
                creator: this.creator,
                author: this.author
            })
            this.bookname = ''
            this.creator = ''
            this.author = ''
        }
    }
}
</script>

<style scoped>
.body {
    padding: 15px;
}
</style>
